QML基本类型及语法

Posted on | In ,

本文将针对QML基本类型进行相关总结

QML基本类型

QML的基本类型主要包括两类：

  • 单值（int、var等）
  • 符合类型（size是一个由width和height属性组成的类型）

QML语言提供的基本类型

类型名 说明
int
double
bool
real
string
enumeration
list QML object 的列表
var 通用属性类型，类似于C++中的auto
url 资源定位器

QML模块提供的基本类型

类型名 属性
date 时间
point (x,y)
rect (x,y,width,height)
size (width,height)

property

property是对象的一个属性，一个property的值可以被其他的对象进行访问和修改。

1
2
3
4
5
Rectangle {
    property color previousColor
    property color nextColor
    onNextColorChanged: console.log("The next color will be: " + nextColor.toString())
}

基本类型行为改变

一些基本类型具有属性，例如font类型包括pixelSize，family等属性，基本类型具有属性改变的信号，但是基本类型的属性不具有类型改变的信号，例如：

1
2
3
4
5
6
7
8
Text{
    onFont.pixelSizeChanged: doSomething()   //非法，pixelSize是font的属性，font是基本类型，基本类型的属性不具有类型改变信号
    font{
        onPixelSizeChanged: doSomething()   //非法，同上理
    }
    
    onFontChanged: doSomething()     //合法，基本类型具有属性改变信号，改变font的任意属性，就会触发属性改变信号
}

QML语法

QML文件基本结构

一个QML文档包括两个部分：

  • import部分：引入所需模块
  • QML元素部分：构成窗口的基本元素

需要注意的是，一个QML有且只有一个根元素，根元素与其子元素一起，构成了一棵多叉树，QML元素可以嵌套，并使用{}划分范围，{}中是元素的属性，属性以键值对的方式name:value提供，元素可以有一个id属性，相当于该元素的指针，id属性必须唯一，一般来说，根元素的id为root，子元素可以使用parent关键字访问元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Window{
    id: rootID;
    visible: true
    width: 640
    height: 480
    title: qsTr("QML Syntax Demo")

    Row{
        id : row1
        anchors.centerIn: parent
        spacing: 20

        Rectangle{
            width: 150;
            height: 150
            color: "red"
            radius: 20
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("clicked on the red rect")
                }
            }
        }
    }
}

上面的qml文件中各个模块之间关系如下：

graph TB
    subgraph Window
    subgraph Row
        Rectangle
    end
    end

QML属性

（这一部分还不是很懂，先不写了）

QML对象间交互

在进行GUI设计时，我们往往需要在对象之间进行互动，例如点击一个方块，修改另一个方块的颜色，这种功能是通过对象id实现的，直接放一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Rectangle{
    id: redRectId
    width: 50
    height: width * 1.5
    color: "red"
}

Rectangle{
    id: blueRectId
    color: "blue"
    width: 100
    height: 100
    anchors.bottom: parent.bottom

    MouseArea{
        anchors.fill: parent
        onClicked: {
            redRectId.width = redRectId.width + 10   // 通过redRectId修改其大小
        }
    }
}

值与绑定

我们可以创造一个Rectangle，其height随width变化而变化，这里的隐含意思是，height和width进行了绑定。绑定关系可以被打破或重建，具体方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Rectangle{
    id: redRectId
    width: 50
    height: width * 1.5
    color: "red"
}

Rectangle{
    id: blueRectId
    color: "blue"
    width: 100
    height: 100
    anchors.bottom: parent.bottom

    MouseArea{
        anchors.fill: parent
        onClicked: {
            redRectId.width = redRectId.width + 10   // 通过redRectId修改其大小，由于redRectId 中width和height绑定，所以两个值均会被修改
        }
    }
}

Rectangle{
    id: greenRectId
    color: "green"
    width: 100
    height: 100
    anchors.bottom: parent.bottom
    anchors.left: blueRectId.right
    MouseArea{
        anchors.fill: parent
        onClicked: {
            redRectId.height = 100 //绑定关系被打破！！！如果点击了绿色方块，再点击蓝色，会发现高度不随宽度变化而变化
            redRectId.height = 2 * redRectId.width //绑定关系依然被打破！！！这里只是简单地将width×2的值给了height
            rectRectId.height = Qt.binding(function(){
            	return 2 * redRectId.width
            })   // 重新建立绑定关系
        }
    }
}

全局对象(global object)

qml中有一个全局对象叫做Qt，方便我们建立一些类型，使用方法为调用其内部的函数或者成员，具体例子如下如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Text{
    color: Qt.rgba(1,0,0,1)    //调用Qt中的rgba方法创建一个颜色对象
    text: Qt.md5("hello world")    
}

property var fonts : Qt.fontFamilies()

Rectangle{
    width : 200
    height: 200
    color: "red"
    anchors.centerIn: parent
    
    /*下面是一些Qt Object的例子*/
    MouseArea{
        anchors.fill : parent
        onClicked: {
            console.log("quiting")
            Qt.quit()   //关闭
            
            for(var i = 0; i<fonts.length;i++){
                console.log("[" + i + "]:" + fonts[i])
            }
            
            var mName = "Duan"
            var mNameHash = Qt.md5(mName)
            console.log("The hash of the name:" + nNameHash)
            
            //打开外部链接
            Qt.openUrlExternally("http://www.alittlehusky.cn")
            //打开本地文件
            Qt.openUrlExternally("file:///filelink")
            
        }
    }
}

Qt对象的一些常用方法如下：

名称 作用 备注
Qt.quit() 退出

详细内容请参考：Qt Global Object

0%